<template>
  <div class="home-page">
    <div class="swiper-container" :style="{'height':swiperHeight+'px'}">
      <div class="sanjiao">
        <img src="../../assets/sanjiao.png" alt="">
        <img src="../../assets/down.png" alt="" class="down-jiantou">
      </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide box1">
          <div>
            <span>请容许我们自豪地向大家介绍邓迪国际学院——<br>我们与英国排名前20的邓迪大学合作运营的嵌入式学院。<br>（2021年卫报大学指南）</span>
            <!--            <span>牛津学院</span>-->

          </div>
        </div>

      </div>
      <!-- Add Pagination -->
      <!--      <div class="swiper-pagination"></div>-->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <div class="main-center">
      <h1 style="text-align: center;margin-top: 50px">邓迪大学</h1>
      <div>
        <img src="../../assets/dundee/dundee1-01-1024x545.jpg" alt="" style="width: 323px;display: block;margin: 0 auto">
      </div>
      <div class="details">
        <p>牛津国际教育集团与邓迪大学合作，在2017年6月成立了邓迪国际学院。</p>
        <p>邓迪国际学院是位于邓迪大学市中心校区的嵌入式学院。邓迪国际学院提供预科课程，作为邓迪大学联合学位第一阶段的教育。</p>
        <p>邓迪国际学院提供了攻读邓迪大学部分最受欢迎的学位及其两所国际知名学院的途径：</p>
        <ul>
          <li><a href="https://www.dundee.ac.uk/djcad/">-邓肯约旦斯通艺术设计学院</a></li>
          <li><a href="https://www.dundee.ac.uk/cepmlp">-能源、石油和矿产法律与政策研究中心</a></li>
        </ul>
        <p>邓迪国际学院提供国际联合本科课程和国际联合硕士课程第一阶段的教育。顺利完成邓迪国际学院的学习以后，学生可直接进入邓迪大学继续学业。</p>
        <p>邓迪大学是一所世界知名学府，以其优秀的学术成果、友好的氛围以及邻近繁华城市和风景如画的乡村的优秀地理位置而闻名。邓迪大学以其卓越的学生体验而闻名，被《2020年泰晤士报和星期日泰晤士报优秀大学指南》评为“<strong>年度最佳学生体验大学</strong>”。该校的学生满意度也在英国排名第11位（2020年全国学生调查）。</p>
        <p>邓迪大学有很多备受推崇的优质课程，科目广泛，包括艺术与设计、生物医学、牙科学、工程学、石油和天然气法或石油税收与金融。</p>
        <p><strong style="font-size: 22px;line-height: 40px;">邓迪国际学院课程（更多详情请点击具体课程板块）：</strong></p>
        <p><a href="https://www.dundee.ac.uk/international-college-dundee/"><strong>国际联合本科课程</strong></a></p>
        <p><a href="https://www.dundee.ac.uk/international-college-dundee/">国际大一（IS1）</a></p>
        <ul>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iib/international-stage-one/">-艺术与设计</a></li>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iib/international-stage-one/">-商学</a></li>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iib/international-stage-one/">-计算机学</a></li>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iib/international-stage-one/">-工程学</a></li>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iib/international-stage-one/">-生命科学与生物医学</a></li>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iib/international-stage-one/">-护理学</a></li>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iib/international-stage-one/">-法律与社会学</a></li>
        </ul>
        <p><a href="https://www.dundee.ac.uk/international-college-dundee/iib/international-stage-two/"><strong>国际大二 (IS2)：商务实践</strong></a></p>
        <p><a href="https://www.dundee.ac.uk/international-college-dundee/"><strong>国际联合硕士课程</strong></a></p>
        <p><a href="https://www.dundee.ac.uk/international-college-dundee/iim/">硕士预科课程</a></p>
        <ul>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iim/">-商学</a></li>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iim/">-设计</a></li>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iim/">-能源与可持续发展</a></li>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iim/">-工程学</a></li>
          <li><a href="https://www.dundee.ac.uk/international-college-dundee/iim/">-健康、教育与社会科学</a></li>
          <li>-法律</li>
          <li>-护理学与保健学</li>
        </ul>
        <p><strong style="font-size: 22px;line-height: 40px;">线上硕士预科课程和英语先修班费用</strong></p>
        <p>如何付款</p>
        <p>您的学费明细将在录取通知书上列明，通过电子邮件发送。</p>
        <p>学费可通过银行转账、借记卡或信用卡在线支付。</p>
        <p>您可以<a href="https://www.flywire.com/pay/oxldundeeint/"><strong>点击这里</strong></a>使用我们的在线支付工具支付您的线上硕士预科课程或英语先修班费用</p>
        <p>如欲了解更多有关费用和申请流程的信息，请<a href="https://www.dundee.ac.uk/international-college-dundee/"><strong>点击这里</strong></a>访问邓迪国际学院网站</p>
      </div>
    </div>

  </div>
</template>

<script>
  import swiper from '../../assets/swiper/swiper-bundle.min'
  export default {
    name: "index",
    created() {
      let H = window.innerHeight

      this.swiperHeight = H
    },
    mounted() {
      var swiper = new Swiper('.swiper-container', {
        // spaceBetween: 30,
        centeredSlides: true,
        /*autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },*/
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    }
  }
</script>

<style scoped lang="scss">
  .main-center {
    max-width: 1200px;
    margin: 0 auto;
  }

  .swiper-container {
    width: 100%;
    height: 1000px;
    position: relative;
  }

  .sanjiao {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    z-index: 222;

    img {
      width: 120px;
      display: block;
    }

    span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      display: block;
      text-align: center;
      color: #303030;
      z-index: 999;
    }

    .down-jiantou {
      position: absolute;
      left: 50%;
      margin-left: -19px;
      bottom: 9px;
      width: 38px;
      animation: shangxia 0.7s linear infinite;
    }
    @keyframes shangxia {
      0% {bottom: 9px}
      50%{bottom: 3px}
      100%{bottom: 9px}
    }
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide > div:nth-of-type(1) {
    margin: 60px 0;
    margin-bottom: 35px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .65);
    padding: 20px 35px;
  }

  .swiper-slide > div:nth-of-type(1) span:nth-of-type(1) {
    font-size: 17px;
    color: #303030;
    margin-bottom: 20px;
    line-height: 34px;
  }

  .swiper-slide > div:nth-of-type(1) span:nth-of-type(2) {
    font-size: 25px;
    font-weight: bold;
    color: #303030;
  }

  .swiper-slide > div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    padding: 10px 40px;
    background: rgba(255, 255, 255, .65);
    transition: all .4s ease;
    cursor: pointer;
  }

  .swiper-slide > div:nth-of-type(2) span {


    line-height: 32px;
    font-size: 18px;
    color: #303030;
  }

  .swiper-slide > div:nth-of-type(2):hover {
    background: #3281c4;
  }

  .box {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .box1 {
    background: url("../../assets/dundee/Oxford.International.ICD-Uni-Dundee-Image-1.jpg") no-repeat center center;
    background-size: 100% auto;
  }

  .box2 {
    background: url("../../assets/UP-2.jpg") no-repeat center center;
  }

  .box3 {
    background: url("../../assets/UP-3.jpg") no-repeat center center;
  }

  .box4 {
    background: url("../../assets/UP-4.jpg") no-repeat center center;
  }
  .details{
    font-size: 18px;
    line-height: 36px;
    color: #303030;
    padding-bottom: 100px;
  a{
    text-decoration: none;
    color: #303030;
  }
  }
</style>
